<template>
	<view class="add-edit clearfix">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">添加收货地址</block>
		</cu-custom>
		<form class="block" @submit="formSubmit">
			<view class="solid-top border-width-1 text-black mt5">
				<view class="cu-form-group solid-bottom">
					<view class=" f15">收货人</view>
					<input class="f14 text-right esswidth" placeholder-class="text-info" placeholder="请输入收货人姓名" name="username" v-model="username" />
				</view>
				<view class="cu-form-group solid-bottom">
					<view class=" f15">手机号码</view>
					<input class="f14 text-right esswidth" type="number" placeholder-class="text-info" placeholder="请输入手机号码" name="mobile" v-model="mobile" />
				</view>
				<view class="cu-form-group solid-bottom"  @tap="toggleTab('region')">
					<view class=" f15">所在地区</view>
					<input class="f14 text-right esswidth"  disabled placeholder-class="text-info" placeholder="请选择所在地区" name="citys" v-model="citys" />
					<text class="cuIcon-right text-info"></text>
				</view>
				<view class="cu-form-group solid-bottom"><textarea maxlength="120" placeholder-class="text-info" placeholder="请填写街道地址" name="address" v-model="address" /></view>
				<view class="mt30 px15 flex flex-v">
					<button formType="submit" class="cu-btn radius-5 lg add-button text-white">确定</button>
				</view>
			</view>
		</form>
		<w-picker
			mode="region"
			:defaultVal="regionDval"
			:areaCode="arealist"
			:hideArea="false"
			@confirm="onConfirm" 
			ref="region"
			:timeout="true"
		></w-picker>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import wPicker from "@/components/w-picker/w-picker.vue";
export default {
	components:{
	    wPicker
	 },
	data() {
		return {
			id: '',
			username: '',
			mobile: '',
			address: '',
			citys:'',
			city:'',
			province:'',
			district:'',
			linkageVal:'',
			arealist:[],
			regionDval:[]
		}
	},
	computed: {
		
		rule() {
			return [
				{ name: 'username', checkType: 'required', checkRule: '', errorMsg: '请输入收货人姓名' },
				{ name: 'mobile', checkType: 'phone', checkRule: '', errorMsg: '请输入手机号码'},
				//{ name: 'code', checkType: 'required', checkRule: '', errorMsg:this.i18n.rule[2]  },
				{ name: 'address', checkType: 'required', checkRule: '', errorMsg: '请填写街道地址' }
			]
		}
	},
	methods: {
		...mapActions(['setUpdate']),
		toggleTab(str){
			this.$refs[str].show();
		},
		onConfirm(val){
			this.province=val.checkArr[0]
			this.city=val.checkArr[1]
			this.district=val.checkArr[2]
			this.citys=val.result
		},
		async formSubmit(e) {
			if(this.username==''){
				uni.showToast({
					title:'请输入收货人姓名',
					icon:'none'
				})
				return false
			}
			if(this.mobile==''){
				uni.showToast({
					title:'请输入手机号码',
					icon:'none'
				})
				return false
			}
			if(this.citys==''){
				uni.showToast({
					title:'请选择所在地区',
					icon:'none'
				})
				return false
			}
			if(this.address==''){
				uni.showToast({
					title:'请填写详细地址',
					icon:'none'
				})
				return false
			}
			let parmas={
				sheng:this.province,
				shi:this.city,
				xian:this.district,
				street:this.address,
				name:this.username,
				tel:this.mobile,
			}
			let { data } = await this.$http.post('user.addaddress', parmas, {
				tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  }
			})
			this.setUpdate(true) 
		}
	}
}
</script>

<style lang="less">
	.add-button{
		width: 100%;
		height: 96rpx;
		background-color: #FE4725 !important;
		border-radius: 10rpx;
	}
	.esswidth{
		width: 500rpx !important;
	}
</style>